Si aún no has descubierto la librería jQuery o aún no te crees su eslogan de "Write less, do more", éste es el momento: con ella vamos a aprender a crear un menú desplegable utilizando listas y muy pocas líneas de código. Para ello, sólo tienes que seguir estos pasos:
0. Descargar la librería
Si accedes a la página de jQuery, verás que a la derecha tienes un enlace para descargar la librería. Como no nos interesa (hoy) analizar su funcionamiento, lo mejor es que escojas la versión comprimida, que ocupa tan sólo 19 KB.
Por cierto, si no la has usado nunca, te recomiendo que te leas el Tutorial de jQuery aquí, en Cristalab.
1. Preparar el menú de navegación
Como, en estos tiempos que corren, nos interesa que la web sea lo más semántica posible, vamos a utilizar listas. Crea un nuevo documento HTML e introduce el siguiente código:
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Menú desplegable con jQuery en 5 minutos</title> </head> <body> <h1>Menú desplegable con jQuery en 5 minutos</h1> <ul> <li><a href="#">Inicio</a> <ul> <li><a href="#">¿Qué es jQuery?</a></li> <li><a href="#">¿Por qué debería usarlo?</a></li> <li><a href="#">¿Por qué tengo que seguir poniendo elementos de lista?</a></li> </ul> </li> <li><a href="#">Ejemplos</a> <ul> <li><a href="#">Menú desplegable</a></li> <li><a href="#">Fade-in, fade-out</a></li> </ul> </li> <li><a href="#">Contacto</a></li> </ul> </body> </html>
Lo cual producirá algo así.
Pero como esto es un pelín feo, vamos a darle un poco de estilo. Procurando que los enlaces principales aparezcan horizontalmente y sin entrar en detalles de CSS, el resultado sería algo así.
2. Esconder las listas secundarias
Añadiendo otra pequeña regla a nuestro estilo CSS, esconderemos las listas secundarias, de forma que sólo se vean, en principio, los enlaces primarios.
Código :
ul li ul {
/* Resto de estilos... */
display: none;
}
Quedando la cosa así.
Ahora estamos listos para empezar a escribir el JavaScript.
3. Escribir el código JavaScript
Empezamos, como siempre, con:
Código :
$(document).ready(function() {});
Y ahora, buscamos que, cuando el ratón pase por encima de cualquier elemento de lista que contenga, a su vez, otra lista, se muestre dicha lista secundaria. Haciendo uso de los magníficos selectores de jQuery y del evento "hover":
Código :
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Muestra y oculta los menús
$('ul li:has(ul)').hover(
function(e)
{
$(this).find('ul').css({display: "block"});
},
function(e)
{
$(this).find('ul').css({display: "none"});
}
);
});
</script>
Explicamos lo que haya podido quedar un poco más dudoso:
- El selector es 'ul li:has(ul)'; es decir: todos los elementos de lista (li) que tengan, a su vez, otra lista [li:has(ul)] y que, obviamente, se encuentren dentro de una lista principal [ul li:has(ul)].
- El evento "hover" requiere que se especifiquen dos funciones: una para cuando el ratón llega, y otra para cuando se va.
- "this" hace referencia al elemento de lista sobre el que ha pasado el ratón.
- find() sirve para lo que su propio nombre indica.
¡Y ya tenemos nuestro menú! Fácil, ¿verdad?
Apéndice: Efectos vistosos
jQuery también nos permite efectos como estos:
Efecto 1
Efecto 2
Como veis, con muy pocas líneas de código y muy poco tiempo hemos conseguido un efecto elegante que podremos usar en nuestros sitios web.
Espero que les haya gustado el tip, ¡un saludo!
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por adaraja el 13 de Julio de 2011
¿Se podría hacer?
Gracias por los tutoriales, son sencillos y buenos
Por aadvark el 02 de Septiembre de 2011
Por sorceles el 09 de Diciembre de 2011
Por jemp_intrepido el 01 de Febrero de 2012
atte: jemp_intrepido
Por TuNombre el 10 de Febrero de 2012
Por Julian el 05 de Julio de 2012
avast! ha evitado que visites una página web infectada
Si lo comparamos con en el pasado, cuando el correo electrónico era el método clave para la propagación de virus, investigaciones de Laboratorio de Virus muestran que más del 80% del malware se propaga ahora a través de Internet. Aún más notable es que sólo el 1% proviene de sitios sospechosos o poco fiables. El resto se extiende a través de sitios web legítimos que han sido manipulados.
Sí, estuvo cerca, pero tranquilo…
Detalles de la infección
URL: http://www.jlc-productions.net/tips/ddme...
Proceso: C:\Program Files (x86)\Mozilla Firefox\f...
Infección: HTML:RedirME-inf [Trj]
Julian-blog :
Porque el blog está muerto, y alguien ha comprado el dominio y lo ha redirigido a páginas extrañas. Lamento las molestias causadas.
Por Jose el 07 de Agosto de 2012
Por HaroldPizarro el 09 de Noviembre de 2013
mi codigo es
esto va en el header
<nav id="navigation">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="nav-btn" rel="home">INICIO<span class="arr"></span></a>
<ul id="menu">
<?php wp_nav_menu(); ?>
</ul>
</nav>
esto en las funciones
$(function() {
$(document).on('focusin', '.field, textarea', function() {
if(this.title==this.value) {
this.value = '';
}
}).on('focusout', '.field, textarea', function(){
if(this.value=='') {
this.value = this.title;
}
});
$('#navigation ul li:first-child').addClass('first');
$('.footer-nav ul li:first-child').addClass('first');
$('#navigation a.nav-btn').click(function(){
$(this).closest('#navigation').find('ul').slideToggle()
$(this).find('span').toggleClass('active')
return false;
})
});
$(document).ready(function() {
// Muestra y oculta los menús
$('ul li:has(ul)').hover(
function(e)
{
$(this).find('ul').css({display: "block"});
},
function(e)
{
$(this).find('ul').css({display: "none"});
}
);
});
Por andresgarcia313 el 19 de Noviembre de 2014
Por Henry D'Santiago el 03 de Septiembre de 2016
Por solisarg el 15 de Noviembre de 2018
Cerrando
Jorge